<template>
  <div class="layout-col flex2 mlr15">
		<!-- 头部 -->
		<top-title />
    <!-- 地图 -->
    <div v-show="!publicStore.districtId" class="ww100 hh100 relative" id="Map"></div>
		<!-- 列表 -->
		<List v-if="publicStore.districtId" class="ww100 hh100 relative" />
  </div>
</template>

<script lang="ts" setup>
	import topTitle from '@/views/async/home/topCenter/title'
	import List from '@/views/async/home/topCenter/list'
  import MAPDATA from '@/utils/map'
	import ec from '@/utils/chart'
	const { drawChart } = ec()
	const { proxy }:any = getCurrentInstance()
	const publicStore = proxy.publicStore()
	const state = reactive({
	  ...publicStore.$state,
	})
  let query = $ref('')
	
  // 监控地图
  watch(() => publicStore.adcode, async(val) => {
		await nextTick()
		if(publicStore.districtId) return
		console.log('更新地图------------------')
		drawChart('Map','Map', '', val)
  }, {immediate: true, deep: true})
</script>

<style scoped lang="scss">
:deep(.custom-tooltip-box) {
  padding: 10px 15px !important;
  border-radius: 8px !important;
  border: 1px solid #aaa !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0px 0px 8px 2px rgba(1, 136, 255, 0.5) !important;
}
:deep(.bg-img) {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  margin-top: -5px;
  background: url('@/assets/images/g1.png') no-repeat center/25px;
}
</style>
